<template>
  <div>
    <div class="node" v-has="{action: 'agreement:list', effect: 'move'}">
      <div class="search_box topSelect">
      </div>
      <Panel title="协议管理">
        <div slot='ext' class="examine">
          <el-button size="mini" v-has="{action: 'agreement:add', effect: 'move'}" class="button-offt" type="success" icon="el-icon-plus" @click="()=>edit()">新增</el-button>
          <el-button type="default" icon="el-icon-refresh" class="button-offt" @click="()=>queryData()">刷新数据</el-button>
      </div>
      <TableEncapsulation
        slot="body"
        :tableConfig="tableConfig"
        :tableData="tableData"
      >
      <template slot="operation" slot-scope="operation">
            <el-button size="mini" icon="el-icon-edit"
              v-has="{action: 'agreement:update', effect: 'move'}"
              @click="()=>edit(operation.row)"
            >编辑</el-button>
          </template>
          <TablePager
            slot="pager"
            v-if="pager.use"
            :size="pager.size"
            :pageChange="pageChange"
            :show-total="pager.showTotal"
            :total="pager.total"
            :current="pager.current"
          >
            <span class="demonstration">GO></span>
          </TablePager>
      </TableEncapsulation>
      </Panel>

      <ModalPanel 
        :visible='visible'
        title="编辑"
        :onCancel="onCancel"
        class="bannerDialog"
        :onOk="onSubmit">
        <div>
          <ModifyForm
            :hiddenBtn='true'
            :editColumn='editColumn'
            :updateData="updateData"
            labelWidth='100px'
            ref="configModal"
            class="ModifyForm"
            :temporaryData='modalData'>
              <div slot="timePost">
                  <el-date-picker
                  v-model="appointmentTimePost"
                  type="datetime"
                  unlink-panels
                  value-format="yyyy-MM-dd HH:mm:ss"
                  style="height:40px"
                ></el-date-picker>
              </div>
             <div slot="contentSolt">
              <!-- <mavon-editor v-model="content"></mavon-editor> -->
              <quill-editor ref="myTextEditor" v-model="content" :options="editorOption"></quill-editor>
            </div>
          </ModifyForm>
        </div>
      </ModalPanel>
    </div>
    <div style="display: none;width:100%;height:100%;margin: auto;" v-has="{action: 'agreement:list', effect: 'noPremiss'}">
      <NoPremission></NoPremission>
    </div>
  </div>
</template>
<script>
import request from "@/tools/request";
import Panel from "@/components/Panel";
import TableEncapsulation from "@/components/TableEncapsulation";
import TablePager from "@/components/Pager";
import SearchInput from "@/components/SearchInput";
import ModifyForm from "@/components/ModifyForm";
import ModalPanel from "@/components/ModalPanel";
	import { quillEditor } from 'vue-quill-editor'
  
// import {mavonEditor} from 'mavon-editor';
// import 'mavon-editor/dist/css/index.css';
export default {
  name: "smsTemplate",
  components: {
    TableEncapsulation,
    TablePager,
    Panel,
    SearchInput,
    ModifyForm,
    ModalPanel,
    quillEditor
  },
  data() {
    return {
      visible:false,
      modalData:{},
      tableData: [],
      pager: {
        use: true,
        total: 0,
        current: 1,
        size: 10,
        showTotal: true
      },
      operation: true,
      editorOption: {
				placeholder: '请编辑相关内容'
      },
      content: '',
      appointmentTimePost: '',
      editColumn: [
      {
        name: "类型",
        prop: "type",
        type: "select",
        optionBindLabel: 'name',
        optionBindValue: 'id',
        optionList: [{'id': '','name': "请选择类型"},{'id': 1,'name': "用户协议"},{'id':2, 'name':"会员协议"}],
        width:24,
        required: true,
        onChange: () => {},
      }, 
      {
          name: "生效时间",
          prop: "effectTime",
          type: "other",
          width:24,
          required: false,
          slotName: 'timePost',
        },
      {
        name: "协议内容",
        prop: "content",
        type: "textarea",
        width:24,
        required: false,
        // slotName: 'contentSolt',
      },
    ],
    };
  },
  created() {
    this.queryData();
  },
  computed: {
    tableConfig () {
      return {
        selection: true,
        columnConfig: [
          
          {
            label: "ID",
            type: "text",
            prop: "id",
            align: "center"
          },
          {
            label: "类型",
            type: "other",
            prop: "type",
            align: "center",
            fnc: val => val == 1 ? "用户协议" : "会员协议",
            class:val => val == 1 ? "agree"  : "blue-tag" ,
          },
          {
            label: "内容",
            type: "text",
            prop: "content",
            align: "center",
          },
           {
            label: "生效时间",
            type: "text",
            prop: "effectTime",
            align: "center"
          },
          this.operation && {
            type: "operation",
            align: "center",
            label: "操作",
            width:180
          }
        ].filter(Boolean)
        }
    }
  },
  methods: {
    async queryData() {
      let current = this.pager.current
      let size = this.pager.size
      const res = await request({
        url: "/manage/agreement/query",
        method: "POST",
        data: {current, size }
      });
      this.tableData = res.data.records
      this.pager.total = res.data.total
      this.pager.current = res.data.current
    },
    pageChange(val) {
      this.pager.current = val;
      this.queryData();
    },
    changeSearch(key, val) {
      this[key] = val;
      this.query.page = 1;
    },
     async onSubmit(){
      this.$refs['configModal'].onSubmit()
    },
    edit(rowData){
      this.modalData = {...rowData}
      this.visible = true
    },
     onCancel(){
      this.visible = false
    },
    async updateData(values){
      let url = values.id ? "/manage/agreement/update" : "/manage/agreement/add"
      let msg = values.id ? "编辑成功" : "添加成功"
      let effectTime = this.appointmentTimePost
      let content = this.content
      const { id, type } = values
      let res = await request({
        url: url,
        method: "POST",
        data: { id ,type,effectTime, content}
      })
      if( res.code !== 200) return
      this.$message.success(msg)
      this.visible = false
      this.queryData()
    },
  }
}
</script>
<style lang='scss' >

</style>